<template>
  <div class="flex-center">
    <div class="flex-shrink-0 pr16 border-right">
      <div class="flex-center">
        <img v-if="!options.unfinishedCount" src="@/assets/img/shebaopaidan/blueright.png" style="width: 16px; height: 16px" />
        <img v-if="options.unfinishedCount" src="@/assets/img/shebaopaidan/rectangle.png" style="width: 16px; height: 16px" />
        <a-tooltip :title="options.missionName">
          <div class="fs18 fw600 mh8 ellipsis pointer" style="width: 240px">{{ options.missionName }}</div>
        </a-tooltip>
        <div v-if="options.state === 0" class="ph4 br4 fs12" style="border: 1px solid rgba(255, 165, 38, 0.6); color: #ffbb00">未接单</div>
        <a-popover v-else-if="options.state === 1" placement="rightTop">
          <template slot="content">
            <div style="font-size: 12px; font-weight: 400; color: #a6a8b4">
              <span>接单人</span><span style="margin-left: 80px">接单时间</span>
            </div>
            <div v-for="(item, index) in catLst" :key="index" style="font-size: 12px; font-weight: 400; color: #767885; margin-top: 8px">
              <span>{{ item.name }}</span>
              <span style="margin-left: 80px">{{ item.date }}</span>
            </div>
            <div><span></span><span></span></div>
          </template>
          <div class="ph4 br4 fs12" style="border: 1px solid #32ccaa; color: #32ccaa">已接单</div>
        </a-popover>
      </div>
      <div class="mt12 pl24" style="color: #9c9c9c">{{ moment(options.gmtCreate).format("YYYY-MM-DD HH:mm") }}</div>
    </div>
    <div class="flex-1 flex-center overflow-x-auto" style="color: #9c9c9c">
      <div class="ph16 border-right">
        <div>派单人</div>
        <div class="fs18 fw500 mt8 tc-l1">{{ options.createUser }}</div>
      </div>
      <div class="ph16 border-right">
        <div>派单人数</div>
        <div class="fs18 fw500 mt8 tc-l1">{{ options.dispatchEmpCount }}人</div>
      </div>
      <div class="ph16">
        <div>已完成</div>
        <div class="fs18 fw500 mt8 tc-l1">{{ options.completedCount }}人</div>
      </div>
      <div class="ph16">
        <div>未完成</div>
        <div class="fs18 fw500 mt8 tc-l1">{{ options.unfinishedCount }}人</div>
      </div>
      <div class="ph16 border-right">
        <div>异常</div>
        <div class="fs18 fw500 mt8 tc-l1">{{ options.abnormalCount }}人</div>
      </div>
    </div>
    <div class="flex-center flex-shrink-0 ml12">
      <span v-if="options.fileType === 2" class="tc-theme pointer" @click="modalVisible = true">查看图片</span>
      <span v-else class="tc-theme pointer" @click="handleEvent(options)">查看详情</span>
      <a-dropdown>
        <div class="pointer">
          <span class="fs16 ml12" style="color: #9c9c9c">•</span>
          <span class="fs16 ml2" style="color: #9c9c9c">•</span>
          <span class="fs16 ml2" style="color: #9c9c9c">•</span>
        </div>
        <a-menu slot="overlay">
          <a-menu-item @click="handleMenuchange(options)" :disabled="options.unfinishedCount !== options.dispatchEmpCount">
            删除
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <a-modal v-model="modalVisible" title="查看图片" width="550px">
      <div slot="footer" class="ta-right">
        <a-space :size="16">
          <a-button @click="modalVisible = false">取消</a-button>
          <a-button v-if="options.state === 0" type="primary" @click="doConfirm">确认接单</a-button>
        </a-space>
      </div>
      <div class="flex-center pointer" style="flex-wrap: wrap">
        <div
          v-for="(url, idx) in urls"
          :key="url"
          class="ml12 mb12"
          :style="{
            width: '150px',
            height: '90px',
            'background-image': `url('${url}?x-oss-process=image/resize,w_150')`,
            'background-size': 'contain',
            'background-repeat': 'no-repeat',
            'background-position': 'center'
          }"
          @click="previewImg(idx)"
        />
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "Contentitem",
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      modalVisible: false
    };
  },
  computed: {
    urls() {
      return this.options.fileUrl ? this.options.fileUrl.split(",") : [];
    },
    catLst() {
      if (this.options.receiveJson) {
        const obj = JSON.parse(this.options.receiveJson);
        return Object.keys(obj).map((key) => ({
          name: key,
          date: obj[key]
        }));
      }
      return [];
    }
  },

  created() {},
  methods: {
    previewImg(idx) {
      this.$viewerApi({
        images: this.urls,
        options: {
          initialViewIndex: idx
        }
      });
    },
    doConfirm() {
      this.$request({
        url: `/hr/api/v1/missionCenters/confirmReceive/${this.options.id}`,
        method: "PUT"
      })
        .then(() => {
          this.$message.success("接单成功");
          this.modalVisible = false;
          this.$emit("received");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleEvent(e) {
      this.$emit("change", e);
    },
    handleMenuchange(e) {
      this.$emit("delet", e);
    }
  }
};
</script>

<style lang="scss" scoped></style>
